'use client'
debugger;

import {
	EmitClass,
	EmitContext,
	EmitFunction,
	EmitModule,
	EmitPrimitive,
	EmitTypeEditPanel,
	EmitUICanvasDataModel,
	EmitUIInvokeNodeDataModel,
	EmitUIPortDataDataModel,
	EmitUIPortFlowDataModel
} from '@/pao/emit'
import { BaseObject } from '@/pao/index'
import { MDIMainFormDataModel, MDIPageDataModel, MDIPagePos } from '@/pao/web/mdi'
import { TeamOutlined } from '@ant-design/icons'
import { css } from '@emotion/css'
import { ColorPicker, ColorPickerProps, Input } from 'antd'
import React, { useEffect } from 'react'

import { EmitFunIf } from '@/pao/emit/emitStatements'
import {
	SvgAction,
	SvgBaseShapePathData,
	SvgCanvasDataModel,
	SvgCircleDataModel,
	SvgGroupDataModel,
	SvgLayoutList,
	SvgPathDataModel,
	SvgRectDataModel,
	SvgTextDataModel,
} from '@/pao/web/svg'
import { editable, groups, PropEditor } from '@/pao/web/dataEdit';

@groups([{
	key: 'group1',
	label: 'group1',
	active: true
}])
class MyClass extends BaseObject {
	@editable({
		group: 'group1',
		label: '名称',
		tooltip: '请输入名称',
		editor: <Input />,
		required: true,
		extra: <TeamOutlined />
	})
	name?: string;
	@editable({
		group: 'group1',
		label: '地址',
		tooltip: '请输入名称',
		editor: <Input />,
	})
	address?: string;
	@editable({
		group: 'group2',
		label: '颜色',
		tooltip: '请输入名称',
		editor: <ColorPicker />
	})
	color: ColorPickerProps['value'];
	@editable({
		group: 'group2',
		label: '年龄',
		tooltip: '请输入年龄',
		editor: <Input />
	})
	age?: number;
	@editable({
		group: 'group2',
		label: '年龄',
		tooltip: '请输入年龄',
		editor: <Input />
	})
	age1?: number;
	@editable({
		group: 'group2',
		label: '年龄',
		tooltip: '请输入年龄',
		editor: <Input />
	})
	age2?: number;
	@editable({
		group: 'group2',
		label: '年龄',
		tooltip: '请输入年龄',
		editor: <Input />
	})
	age3?: number;	
}

const myObject = new MyClass().setProps({ name: '张三', address: '地球', color: '#ff0000', age: 18 });
const propEditorDataModel = new PropEditor().setProps({ 
	editorProps: { className: css`overflow: auto;flex: auto;` } 
});
propEditorDataModel.setPropEditorsByObject(myObject);

const detailPage = new MDIPageDataModel().setProps({
		title: "细节",
		pageProps: { className: css`flex: auto;` },
		onRenderClient: () => {
			return propEditorDataModel.render();
		}
	});

const emitCanvas = new EmitUICanvasDataModel().setProps({
	className: css`flex: auto;`,
});

class ActionAddPort extends SvgAction {
	constructor(private node: EmitUIInvokeNodeDataModel) {
		super();
	}

	onMouseDown(e: React.MouseEvent): boolean | void {
		this.node.addPorts(new EmitUIPortDataDataModel().setProps({
			text: "New Port",
		}));
		this.node.refresh();
		this.stop();
		this.end();
	}
}

const node1 = new EmitUIInvokeNodeDataModel().setProps({
	key: "node1",
	title: new SvgTextDataModel().setProps({text:  "For", shapeProps: {cursor: 'default'}}),
	icon: new SvgPathDataModel().setProps({d:  SvgBaseShapePathData.circle}),
	x: 100,
	y: 150,
	// logOnRender: true,
	extraButtons: [
		new SvgPathDataModel().setProps({d:  SvgBaseShapePathData.triangle}),
	],
	onRefresh: () => {
		// console.log(`refresh ${getClass(node1).name}`)
	},
	inPorts: [
		new EmitUIPortFlowDataModel().setProps({
			text: "Enter",
		}),
		new EmitUIPortFlowDataModel().setProps({
			text: "Break",

		}),
		new EmitUIPortDataDataModel().setProps({
			text: "Condition",
		})
	],
	outPorts: [
		new EmitUIPortFlowDataModel().setProps({
			text: "Loop",
			isOut: true,
		}),
		new EmitUIPortFlowDataModel().setProps({
			text: "Exit",
			isOut: true,
		}),
	],
	bottomButtons: [
		new SvgTextDataModel().setProps({text: 'Add',
			startAction: function(this: SvgTextDataModel, e: React.MouseEvent) {
				return new ActionAddPort(node1);
			}
		}),
	]
});
emitCanvas.nodes.addNodes(node1);

const node2 = new EmitFunIf.IfNode().setProps({
	x: 500,
	y: 500,
});
emitCanvas.nodes.addNodes(node2);

const node3 = new EmitUIInvokeNodeDataModel().setProps({
	title: new SvgTextDataModel().setProps({text:  "Select", shapeProps: {cursor: 'default'}}),
	icon: new SvgPathDataModel().setProps({d:  SvgBaseShapePathData.circle}),
	x: 500,
	y: 200,
	extraButtons: [
		new SvgPathDataModel().setProps({d:  SvgBaseShapePathData.pentagon}),
	],
	inPorts: [
		new EmitUIPortDataDataModel().setProps({
			text: "True",
		}),
		new EmitUIPortDataDataModel().setProps({
			text: "False",
		})
	],
	outPorts: [
		new EmitUIPortDataDataModel().setProps({
			text: "Result",
			isOut: true,
		})
	],
});
emitCanvas.nodes.addNodes(node3);

const layoutChild = new SvgGroupDataModel().setProps({
	onRenderBackground: function(this: SvgGroupDataModel) {
		return <rect x={0} y={0} width={this.width} height={this.height} fill="lightgray" />
	},
	layout: new SvgLayoutList().setProps({
		direction: 'horizontal',
		alignment: 'center',
		placement: 'spread',
		padding: 5,
		gap: 10,
	})
});
layoutChild.addNodes(
	new SvgCircleDataModel().setProps({r: 5, fill: 'blue'}),
	new SvgRectDataModel().setProps({size: {width: 100, height: 50}, rx: 5, ry: 5, fill: 'red'}));

const layoutParent = new SvgGroupDataModel().setProps({
	onRenderBackground: function(this: SvgGroupDataModel) {
		return <rect x={0} y={0} width={this.width} height={this.height} fill="gray" />
	},
	layout: new SvgLayoutList().setProps({
		direction: 'vertical',
		alignment: 'stretch',
		placement: 'spread',
		padding: 20,
		gap: 10,
	},),
	x: 100,
	y: 200,
	width: 500,
	height: 300,
});
layoutParent.addNodes(
	new SvgCircleDataModel().setProps({r: 20, fill: 'green'}),
	new SvgRectDataModel().setProps({size: {width: 80, height: 150}, rx: 5, ry: 5, fill: 'yellow'}),
	new SvgCircleDataModel().setProps({r: 20, fill: 'red'}),
	// layoutChild
);

const svgCanvas = new SvgCanvasDataModel().setProps({
	className: css`flex: auto;`,
	onRenderChildren: ()=> {
		return <>
			{layoutParent.render()}
		</>;
	}
})

const circle = new SvgCircleDataModel().setProps({
	r: 20, fill: 'green', x: 100, y: 100,
	logOnRender: true,
})
EmitModule.Module.allowedChildTypeClasses = [
	EmitModule.Module,
]
const emitContext = new EmitContext().setProps({
});

const EmitType_Any = emitContext.createType(EmitPrimitive.Primitive, {
	name: "Any",
});
const EmitType_String = emitContext.createType(EmitPrimitive.Primitive, {
	name: "String",
	instance: EmitType_Any.createReference(),
});
const EmitType_Number = emitContext.createType(EmitPrimitive.Primitive, {
	name: "Number",
	instance: EmitType_Any.createReference(),
});
const EmitType_Boolean = emitContext.createType(EmitPrimitive.Primitive, {
	name: "Boolean",
	instance: EmitType_Any.createReference(),
});
const myModule = emitContext.createType(EmitModule.Module,{
	name: 'MyModule',
});

// const myClass = myModule.createChildType(EmitClass.Class, {
// 	name: 'MyClass1',
// });
// myClass.createMember({
// 	name: 'name',
// 	label: '名称',
// 	type: EmitType_String.createReference(),
// })
// myClass.createMember({
// 		name: 'age',
// 		label: '年龄',
// 		type: EmitType_Number.createReference(),
// })
// myClass.createMember({
// 		name: 'inSchool',
// 		label: '就学',
// 		type: EmitType_Boolean.createReference(),
// })
// const childModule1 =myModule.createChildType(EmitModule.Module, {
// 	name: 'ChildModule1',
// })
// const class1 = childModule1.createChildType(EmitClass.Class, {
// 		name: 'MyClass'
// 	});

// class1.createMember({
// 	name: 'name',
// 	label: '名称',
// 	type: EmitType_String.createReference(),
// });
// class1.createMember({
// 	name: 'age',
// 	label: '年龄',
// 	type: EmitType_Number.createReference(),
// });
// debugger;
const typePanel = new EmitTypeEditPanel();
typePanel.setProps({
	panelProps: { className: css`flex: auto;` },
	type: emitContext.rootType,
});

const typePage = new MDIPageDataModel().setProps({
	title: "类型",
	onRenderClient: ()=>{
		return typePanel.render();
	}
})
const mainForm = new MDIMainFormDataModel();
// mainForm.addPage(detailPage, MDIPagePos.Right);
mainForm.addPage(typePage, MDIPagePos.Left);
mainForm.addPage(new MDIPageDataModel().setProps({
	title: "Page 1",
	onRenderClient: ()=> {
		return emitCanvas.render() 
	}
}));
mainForm.addPage(new MDIPageDataModel().setProps({
	title: "Page 2",
	children: <h1>Page 2</h1>,
}));

export default function Page() {
	useEffect(()=>{
		emitCanvas.refresh();
	}, [emitCanvas])
	return <div className={css`width: 100%;height: 100%; background-color: #f0f2f5; display: flex;`}>
			{mainForm.render()}
		</div>
}
